<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工管理</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入element-UI样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../plugins/element-ui/icon/iconfont.css" />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="../css/dish.css" />
    <link rel="stylesheet" href="../css/all.css" />
</head>
<body>
    <div class="container" id="food-app">
        <!-- 顶部 -->
        <div class="tableBar">
            <!-- @keyup.enter.native:回车按钮动作 -->
            <el-input class="tableBar-input" v-model="input" placeholder="请输入菜品名称" style="width: 250px" clearable @keyup.enter.native="init()">
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init()"></i>
            </el-input>
            <div class="tableLab">
                <span class="span-btn delBut non" @click="deleteListHandle()">批量删除</span>
                <el-divider direction="vertical"></el-divider>     <!-- 分隔符 -->
                <span class="span-btn blueBug non" @click="statusListHandle(1)">批量启售</span>
                <el-divider direction="vertical"></el-divider>
                <span style="border:none;" class="span-btn delBut non" @click="statusListHandle(0)">批量停售</span>
                <el-button class="add-btn" type="primary" @click="showAdd()">+ 新建菜品</el-button>
            </div>
            <div style="clear: both"></div>
            <!-- 添加菜品弹窗 -->
            <el-dialog title="添加菜品" :visible.sync="dialogAddFormVisible" :fullscreen="true">
                <!-- label-position:表单域标签的位置,label-width:表单域标签的宽度 -->
                <el-form ref="elAdd":model="elAdd" :rules="rules" label-position="right" label-width="100px" :clearable="true" >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="菜品名称" prop="name"><el-input v-model="elAdd.name"/></el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜品分类" prop="categoryId">
                                <el-select v-model="elAdd.categoryId" placeholder="请选择菜品分类">
                                    <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜品价格:" prop="price">
                                <el-input v-model="elAdd.price" placeholder="请设置菜品价格"/>
                            </el-form-item>
                        </el-col>
                        <!-- 多选器 -->
                        <el-col :span="24">
                            <el-form-item label="口味做法配置:" >
                                <el-select v-model="elAdd.flavors" multiple placeholder="请选择" size="medium" filterable allow-create>
                                    <el-option v-for="item in tasteList" :key="item.value" :label="item" :value="item"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 图片上传 -->
                        <el-col :span="24">
                            <el-form-item label="图片Url">
                                <el-input v-model="elAdd.image" type="text" autocomplete="off" style="float:left;width: 40%" clearable>

                                </el-input>
                                <!-- action:上传的地址 -->
                                <el-upload class="upload-demo" ref="upload" action="" style="float:left;"
                                           :http-request="elAddUpload"
                                           :before-upload="beforeUpload"
                                           :show-file-list="false"
                                           style="width: 50px">
                                    <el-button size="small" type="primary" >本地上传</el-button>
                                </el-upload>
                                <img v-if="elAdd.image!=''" :src="elAdd.image" style="height: 70px;width: 100px;float: left;margin-left: 50px">
                                <div style="clear: both"></div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品码" prop="code">
                                <el-input v-model="elAdd.code" placeholder="请设置菜品商品码"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="菜品序号:" prop="sort">
                                <el-input v-model="elAdd.sort" placeholder="请设置菜品序号"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="菜品描述:" prop="region">
                                <el-input v-model="elAdd.description" type="textarea" :rows="3" placeholder="菜品描述，最长200字" maxlength="200"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddFormVisible= false">取消</el-button>
                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 查询信息 -->
        <!-- selection-change:当选择项发生变化时会触发该事件 -->
        <el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange" height="450" :header-cell-style="{background:'#d3dce6',color:'#606266'}">
            <el-table-column type="selection" width="25"></el-table-column>    <!-- 复选框 -->
            <el-table-column prop="name" label="菜品名称"></el-table-column>
            <el-table-column prop="image" label="图片" align="center">
                <template slot-scope="{ row }">
                    <el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="row.image">
                        <div slot="error" class="image-slot"><img src="../images/noImg.png"  style="width: auto; height: 40px; border:none;" ></div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="菜品分类"></el-table-column>
            <el-table-column label="售价">
                <template slot-scope="scope">
                    <span style="margin-right: 10px;">￥{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="售卖状态">
                <template slot-scope="scope">
                    <span style="margin-right: 10px;">{{ scope.row.status == '0' ? '停售' : '启售' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="最后操作时间"></el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" class="blueBug" @click="showUpdate(scope.row.id)">修改</el-button>
                    <el-button type="text" size="small" class="blueBug" @click="statusHandle(scope.row)">
                        {{ scope.row.status == '0' ? '启售' : '停售' }}
                    </el-button>
                    <el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改菜品弹窗 -->
        <el-dialog title="修改菜品" :visible.sync="dialogUpdateFormVisible" :fullscreen="true">
            <!-- label-position:表单域标签的位置,label-width:表单域标签的宽度 -->
            <el-form ref="elUpdate":model="elUpdate" :rules="rules" label-position="right" label-width="100px" :clearable="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜品名称" prop="name"><el-input v-model="elUpdate.name"></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜品分类" prop="categoryId">
                            <el-select v-model="elUpdate.categoryId" placeholder="请选择菜品分类">
                                <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜品价格:" prop="price">
                            <el-input v-model="elUpdate.price" placeholder="请设置菜品价格"/>
                        </el-form-item>
                    </el-col>
                    <!-- 多选器 -->
                    <el-col :span="24">
                        <el-form-item label="口味做法配置:" >
                            <el-select v-model="elUpdate.flavors" multiple placeholder="请选择" size="medium"  filterable allow-create>
                                <el-option v-for="item in tasteList" :key="item.value" :label="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 图片上传 -->
                    <el-col :span="24">
                        <el-form-item label="图片Url">
                            <el-input v-model="elUpdate.image" prop="image" style="width: 40%;float: left">
                            </el-input>
                            <!-- action:上传的地址 -->
                            <el-upload class="upload-demo" ref="upload" action="" style="float:left;"
                                       :http-request="elUpdateUpload"
                                       :before-upload="beforeUpload"
                                       :show-file-list="false"
                                       style="width: 50px">
                                <el-button size="small" type="primary">本地上传</el-button>
                            </el-upload>
                            <img v-if="elUpdate.image!=''" :src="elUpdate.image" style="height: 40px;width: 50px;float: left;margin-left: 50px">
                            <div style="clear: both"></div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品码" prop="code">
                            <el-input v-model="elUpdate.code" placeholder="请设置菜品商品码"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜品序号:" prop="sort">
                            <el-input v-model="elUpdate.sort" placeholder="请设置菜品序号"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="菜品描述:" prop="region">
                            <el-input v-model="elUpdate.description" type="textarea" :rows="3" placeholder="菜品描述，最长200字" maxlength="200"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateFormVisible= false">取消</el-button>
                <el-button type="primary" @click="handleUpdate()">确定</el-button>
            </div>
        </el-dialog>
        <!-- 底部 -->
        <el-pagination class="pageList"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :current-page.sync="currentPage"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</body>
    <!-- 引入VUE组件 -->
    <script src="../plugins/vue/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>
    <!-- 引入JS -->
    <script src="../js/dish.js"></script>
</html>